<script setup>
  import { computed, ref } from 'vue'
  import { patientInfoStore } from '@/store/patient.js'
  import { storeToRefs } from 'pinia'
  const medicaltimeList = [
    { value: 1, label: '一周内' },
    { value: 2, label: '一个月内' },
    { value: 3, label: '半年内' },
    { value: 4, label: '大于半年' },
  ]

  // 将pinia中的数据转换为ref数据
  const { illnessValue, illnessInfo, illnessDescInfo } = storeToRefs(
    patientInfoStore()
  )

  // 病情时长value值
  const medicalIdnex = ref(0)
  // 获取选中的病情时长，并存储起来
  function onIllnesstimefn(item) {
    medicalIdnex.value = item.value
    illnessInfo.value.illnessTime = item.value
  }

  // 是否显示模态框
  const isIllnessShowModel = computed(() => {
    return (
      illnessInfo.value.consultFlag != '' ||
      illnessInfo.value.illnessDesc != '' ||
      illnessInfo.value.illnessTime != ''
    )
  })

  if (isIllnessShowModel.value) {
    uni.showModal({
      title: '温馨提示',
      content: '您有之前未保存的选项，是否恢复？',
      confirmColor: '#16C2A3',
      cancelColor: '#848484',
      success: ({ confirm }) => {
        if (!confirm) {
          illnessInfo.value = { ...illnessValue.value }
        }
      },
    })
  }

  // 是否显示下一部按钮
  const isIllnessShowBtn = computed(() => {
    return (
      illnessInfo.value.consultFlag !== '' &&
      illnessInfo.value.illnessDesc !== '' &&
      illnessInfo.value.illnessTime !== ''
    )
  })

  // 下一步按钮点击
  // 获取网页参数
  const props = defineProps(['type', 'illnessType', 'depId'])
  function onTopatientfn() {
    illnessDescInfo.value = { ...props }
    uni.navigateTo({
      url: '/subpack_consult/patient/patient',
    })
  }
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image
          src="/static/uploads/doctor-avatar-2.png"
          class="doctor-avatar"
        />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :styles="{ backgroundColor: '#f6f6f6' }"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
            v-model="illnessInfo.illnessDesc"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            class="tag"
            :class="{ active: item.value === illnessInfo.illnessTime }"
            v-for="(item, index) in medicaltimeList"
            :key="item.value"
            @click="onIllnesstimefn(item)"
            >{{ item.label }}</text
          >
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            class="tag"
            @click="illnessInfo.consultFlag = 1"
            :class="{ active: illnessInfo.consultFlag === 1 }"
            >就诊过</text
          >
          <text
            class="tag"
            @click="illnessInfo.consultFlag = 0"
            :class="{ active: illnessInfo.consultFlag === 0 }"
            >没有就诊过</text
          >
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          v-model="illnessInfo.pictures"
          title="上传病情相关图片 (仅医生可见)"
          limit="4"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button
        @click="onTopatientfn"
        :disabled="!isIllnessShowBtn"
        class="uni-button"
      >
        下一步
      </button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
